<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
  <link rel="stylesheet" href="../../styles/common.css" />
  <link rel="stylesheet" href="../../styles/page.css" />
  <style>
    #member-app  .notAdmin::after{
      border: 0 !important;

    }
  </style>
</head>
<body>
  <div class="dashboard-container" id="member-app">
    <div class="container">
      <div class="tableBar">
        <el-input
          v-model="input"
          placeholder="请输入员工姓名"
          style="width: 250px"
          clearable
           @keyup.enter.native="handleQuery"
        >
          <i
            slot="prefix"
            class="el-input__icon el-icon-search"
            style="cursor: pointer"
            @click="handleQuery"
          ></i>
        </el-input>
        <el-button
                type="primary"
                @click="addClass()"
        >
          + 新增员工
        </el-button>
      </div>
      <el-table
        :data="tableData"
        stripe
        class="tableBox"
      >
        <el-table-column
          prop="userName"
          label="员工姓名"
        ></el-table-column>
        <el-table-column
          prop="account"
          label="账号"
        ></el-table-column>
        <el-table-column
          prop="telephoneNumber"
          label="手机号"
        ></el-table-column>
        <el-table-column
                prop="position"
                label="职位"
        ></el-table-column>
        <el-table-column
                prop="sex"
                label="性别"
        ></el-table-column>
        <el-table-column
                label="操作"
                width="160"
                align="center"
        >
          <template slot-scope="scope">
            <el-button
                    type="text"
                    size="small"
                    class="blueBug"
                    @click="editHandle(scope.row)"
            >
              修改
            </el-button>
            <el-button
                    type="text"
                    size="small"
                    class="delBut non"
                    @click="deleteHandle(scope.row.empId)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pageList"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
        :current-page.sync="page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
    <el-dialog
            :title="classData.title"
            :visible.sync="classData.dialogVisible"
            width="30%"
            :before-close="handleClose"
    >
      <el-form
              class="demo-form-inline"
              label-width="100px"
      >
        <el-form-item label="姓名：">
          <el-input
                  v-model="classData.userName"
                  placeholder="请输入姓名"
                  maxlength="14"
          />
        </el-form-item>
        <el-form-item label="性别：">
          <el-select v-model="classData.sex" placeholder="请选择性别" style="width: 100%">
            <el-option label="男" value="男" ></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电话：">
          <el-input v-model="classData.telephoneNumber"   placeholder="请输入电话" />
        </el-form-item>
        <el-form-item label="账号：">
          <el-input v-model="classData.account"   placeholder="请输入账号" />
        </el-form-item>
        <el-form-item label="职位：">
<!--          <el-input v-model="classData.position"   placeholder="请输入职位" />-->
          <el-select v-model="classData.position" placeholder="请选择职位" style="width: 100%">
            <el-option label="经理" value="经理" selected></el-option>
            <el-option label="总经理" value="总经理"></el-option>
            <el-option label="正式员工" value="正式员工" ></el-option>
            <el-option label="小组长" value="小组长" ></el-option>
            <el-option label="组长" value="组长" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="密码：">
          <el-input v-model="classData.password"   placeholder="请输入密码" />
        </el-form-item>
      </el-form>
      <span
              slot="footer"
              class="dialog-footer"
      >
        <el-button
                size="medium"
                @click="classData.dialogVisible = false"
        >取 消</el-button>
        <el-button
                type="primary"
                size="medium"
                @click="submitForm()"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../../plugins/axios/axios.min.js"></script>
    <script src="../../js/request.js"></script>
    <script src="../../api/member.js"></script>
    <script>
      new Vue({
        el: '#member-app',
        data() {
          return {
             input: '',
             counts: 0,
             page: 1,
             pageSize: 10,
             tableData : [],
             id : '',
             status : '',
             classData: {

              'title': '',
              'dialogVisible': false,
              'empId': '',
              'userName': '',
              'sex': '',
              'telephoneNumber' : '',
              'account': '',
              'password':'',
              'position': '',
              'userId': '',
              sort: ''
            }
          }
        },
        computed: {},
        created() {
          this.init()
          this.user = JSON.parse(localStorage.getItem('userInfo')).username
        },
        mounted() {
        },
        methods: {
          async init () {
            const params = {
              page: this.page,
              pageSize: this.pageSize,
              name: this.input ? this.input : undefined
            }
            await getMemberList(params).then(res => {
              if (String(res.code) === '1') {
                this.tableData = res.data || []
                this.counts = res.total
              }
            }).catch(err => {
              this.$message.error('请求出错了：' + err)
            })
          },
          handleQuery() {
            this.page = 1;
            this.init();
          },
          // 添加
          addClass(st) {
            if (st == 'class') {
              this.classData.title = '新增用户'
              this.type = '1'
            } else {
              this.classData.title = '添加用户'
              this.type = '2'
            }
            function generateUUID() {
              return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                var r = Math.random() * 16 | 0,
                        v = c === 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
              });
            }

            let uuid = generateUUID();
            console.log(uuid)
            let randomNumber = parseInt(uuid, 16).toString();
            this.action = 'add'
            this.classData.userName = ''
            this.classData.sex = ''
            this.classData.account = randomNumber
            this.classData.password = '123456'
            this.classData.position = ''
            this.classData.telephoneNumber =''
            this.classData.dialogVisible = true
          },
        editHandle(dat) {
          this.classData.title = '修改员工信息'
          this.action = 'edit'
          this.classData.empId=dat.empId
          this.classData.userName = dat.userName
          this.classData.sex = dat.sex
          this.classData.telephoneNumber = dat.telephoneNumber
          this.classData.account = dat.account
          this.classData.password = dat.password
          this.classData.position = dat.position;
          this.classData.dialogVisible = true
        },
        // 关闭弹窗
        handleClose(st) {
          this.classData.dialogVisible = false
        },
        //删除
        deleteHandle(id) {
          this.$confirm('此操作将永久删除该员工, 是否继续?', '提示', {
            'confirmButtonText': '确定',
            'cancelButtonText': '取消',
            'type': 'warning'
          }).then(() => {
            deleteEmployee(id).then(res => {
              if (res.code === 1) {
                this.$message.success('删除成功！')
                this.handleQuery()
              } else {
                this.$message.error(res.msg || '操作失败')
              }
            }).catch(err => {
              this.$message.error('请求出错了：' + err)
            })
          })
        },
          //数据提交
          submitForm(st) {
            const classData = this.classData
            const  valid = 1
            if (this.action === 'add') {
              if (classData.userName === "") {
                this.$message.error('姓名不能为空！')
                return;
              }
              if (classData.sex === "") {
                this.$message.error('性别不能为空！')
                return;
              }
              if (classData.position === "") {
                this.$message.error('职位不能为空！')
                return;
              }
              // 验证电话号码格式
              let phoneRegex = /^\d{11}$/;
              if (!phoneRegex.test(classData.telephoneNumber)) {
                this.$message.error('电话号码格式不正确！')
                return ;
              }
                  addEmployee(this.classData).then(res => {
                    if (res.code === 1) {
                      this.$message.success('客户信息添加成功！')
                      if (!st) {
                        this.classData.dialogVisible = false
                      } else {
                        this.classData =''
                      }
                      this.handleQuery()
                    } else {
                      this.$message.error(res.msg || '操作失败')
                    }
                  }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                  })
            } else if (valid) {

                const params = {
                  empId: this.empId,
                  userName: this.userName,
                  sex: this.sex,
                  account:this.account,
                  telephoneNumber: this.telephoneNumber,
                  password: this.password,
                  position: this.position
                }
                if (classData.userName === "") {
                  this.$message.error('姓名不能为空！')
                  return;
                }
                if (classData.sex === "") {
                  this.$message.error('性别不能为空！')
                  return;
                }
                if (classData.position === "") {
                  this.$message.error('职位不能为空！')
                  return;
                }
                // 验证电话号码格式
                let phoneRegex = /^\d{11}$/;
                if (!phoneRegex.test(classData.telephoneNumber)) {
                  this.$message.error('电话号码格式不正确！')
                  return ;
                }
                editEmployee(classData).then(res => {
                  if (res.code === 1) {
                    this.$message.success('分类修改成功！')
                    this.classData.dialogVisible = false
                    this.handleQuery()
                  } else {
                    this.$message.error(res.msg || '操作失败')
                  }
                }).catch(err => {
                  this.$message.error('请求出错了：' + err)
                })

            }
          },
          handleSizeChange (val) {
            this.pageSize = val
            this.init()
          },
          handleCurrentChange (val) {
            this.page = val
            this.init()
          }
        }
      })
    </script>
</body>
</html>